<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">

<link rel="import" href="../behaviors/oobe_focus_behavior.html">
<link rel="import" href="../behaviors/oobe_scrollable_behavior.html">
<link rel="import" href="../common_styles/common_styles.html">
<link rel="import" href="../common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../oobe_vars/oobe_shared_vars_css.html">

<!--
  Simple OOBE dialog which should be used for OOBE UI elements.
  It has correct size and padding. It can display top left icon, and has
  several parts: content area; and buttons containers at the top for back
  navigation and for other buttons at the bottom.

  When shown (i.e. when outside container calls .show()):
    1. If this dialog has tags in class "focus-on-show", the first one will be
  focused.
    2. 'show-dialog' is fired.

  Please include oobe-dialog-host-styles shared style if you use oobe-content-dialog.

  Example:
    <style include="oobe-dialog-host-styles"></style>
    <oobe-content-dialog on-show-dialog="onTestDialogShown_">
      <div slot="content">
        <div class="focus-on-show">...</div>
        ...
      </div>
      <div slot="back-navigation">
        ...
      </div>
      <div slot="bottom-buttons">
        ...
      </div>
    </oobe-content-dialog>

  For single-DPI image |oobe-icon| class should be used. To select between two
  images of different DPI, |oobe-icon-1x| and |oobe-icon-2x| should be used
  instead. For example:

      <iron-icon icon="icon1" ... slot="oobe-icon" class="oobe-icon-1x">
      <iron-icon icon-"icon2" ... slot="oobe-icon" class="oobe-icon-2x">

  Attributes:
    no-lazy           - prevents lazy instantiation of the dialog.
-->
<dom-module id="oobe-content-dialog">
  <template>
    <style include="oobe-dialog-host-styles cr-shared-style">
      :host {
        height: var(--oobe-adaptive-dialog-height);
        width: var(--oobe-adaptive-dialog-width);
        @apply --oobe-default-font;
        --oobe-adaptive-dialog-content-width: calc(
            var(--oobe-adaptive-dialog-width) -
            2 * var(--oobe-adaptive-dialog-content-padding));
      }

      :host-context([orientation=vertical]) {
        --oobe-adaptive-dialog-item-alignment: center;
      }

      :host-context([orientation=horizontal]) {
        --oobe-adaptive-dialog-item-alignment: unset;
      }

      #mainContainer {
        align-items: var(--oobe-adaptive-dialog-item-alignment);
        flex-direction: column;
      }

      #scrollContainer {
        border: transparent;
        overflow-y: auto;
        padding-bottom: 0;
        padding-inline-end: var(--oobe-adaptive-dialog-content-padding);
        padding-inline-start: var(--oobe-adaptive-dialog-content-padding);
        padding-top: 0;
      }

      #contentContainer {
        width: var(--oobe-adaptive-dialog-content-width);
      }

      .vertical-mode-centering {
        align-items: var(--oobe-adaptive-dialog-item-alignment);
        display: flex;
        flex-direction: column;
      }

      .buttons-common {
        /* Always allocate height for buttons even a container is empty */
        min-height: var(--oobe-button-height);
        z-index: 1;
      }

      :host([no-buttons]) .buttons-common {
        display: none;
      }

      :host([fullscreen]) #scrollContainer {
        padding-inline-end: 0;
        padding-inline-start: 0;
      }

      :host([fullscreen]) #contentContainer {
        width: 100%;
      }

      .bottom-buttons-container {
        padding-bottom: var(--oobe-adaptive-dialog-buttons-vertical-padding);
        padding-inline-end:
          var(--oobe-adaptive-dialog-buttons-horizontal-padding);
        padding-inline-start:
          var(--oobe-adaptive-dialog-buttons-horizontal-padding);
        padding-top: var(--oobe-adaptive-dialog-buttons-vertical-padding);
      }

      .back-button-container {
        padding-bottom:
          var(--oobe-adaptive-dialog-back-button-vertical-padding);
        padding-inline-end:
          var(--oobe-adaptive-dialog-back-button-horizontal-padding);
        padding-inline-start:
          var(--oobe-adaptive-dialog-back-button-horizontal-padding);
        padding-top: var(--oobe-adaptive-dialog-back-button-vertical-padding);
      }

      #oobe-icon-div ::slotted(hd-iron-icon),
      #oobe-icon-div ::slotted(iron-icon) {
        --iron-icon-height: 32px;
        --iron-icon-width: 32px;
        --iron-icon-fill-color: var(--google-blue-600);
      }
    </style>
    <cr-lazy-render id="lazy">
      <template>
        <div class="buttons-common back-button-container">
          <slot name="back-navigation"></slot>
        </div>
        <div id="mainContainer" class="layout vertical flex">
          <div id="scrollContainer" class="layout vertical flex scrollable"
              on-scroll="applyScrollClassTags_">
            <div id="contentContainer" class="layout vertical flex">
              <slot name="content"></slot>
            </div>
          </div>
        </div>
        <div class="buttons-common bottom-buttons-container
            vertical-mode-centering">
          <slot class="layout horizontal end-justified" name="bottom-buttons">
          </slot>
        </div>
      </template>
    </cr-lazy-render>
  </template>
  <script src="oobe_content_dialog.js"></script>
</dom-module>
